<script setup lang="ts">
  import { inject, computed, h } from 'vue';
  import sysModelContent from './components/systemSource/sysModelContent.vue';
  import sysPanelContent from './components/systemSource/sysPanelContent.vue';
  import sysDOMContent from './components/systemSource/sysDOMContent.vue';
  import myModelContent from './components/mySource/myModelContent.vue';
  import myPanelContent from './components/mySource/myPanelContent.vue';
  import myConfigurationContent from './components/mySource/myConfigurationContent.vue';
  import myImageContent from './components/mySource/myImageContent.vue';
  import { Ref } from '@vue/runtime-dom';
  import '@/views/DigitalTwin/css/left.css';

  /*// 注入共享状态
const topLabels = inject<{ label: string; subItems: any[] }[]>('topLabels')!;
const selectedTopLabelIndex = inject<Ref<number>>('selectedTopLabelIndex')!;
const selectedSubItemIndex = inject<Ref<number>>('selectedSubItemIndex')!;


// 根据选中顶部标签计算要显示的子菜单项
const currentSubItems = computed(() => {
  return topLabels[selectedTopLabelIndex.value].subItems;
});
//根据选中子菜单项计算要显示的组件
const currentComponent = computed(() => {
  console.log(selectedSubItemIndex.value,555555555)
  if (currentSubItems.value && currentSubItems.value.length > 0) {
    return currentSubItems[selectedSubItemIndex.value].component;
  }
  return 'No Content Available';
});*/

  defineProps<{
    currentComponent: string;
  }>();
  // 解析组件名称并返回相应的组件
  const resolveComponent = (componentName: string) => {
    switch (componentName) {
      case 'sysModelContent':
        return sysModelContent;
      case 'sysPanelContent':
        return sysPanelContent;
      case 'sysDOMContent':
        return sysDOMContent;
      case 'myModelContent':
        return myModelContent;
      case 'myPanelContent':
        return myPanelContent;
      case 'myConfigurationContent':
        return myConfigurationContent;
      case 'myImageContent':
        return myImageContent;
      //default: return () => h('div', 'No Content Available');
    }
  };
</script>

<template>
  <main class="content" style="width: 14vw; background-color: #1e2430">
    <component :is="resolveComponent(currentComponent)" />
  </main>
</template>

<style scoped></style>
